<template>
  <div class="page adaofu-poster">
    <div class="container">
      <img :src="imgUrl" mode="widthFix" @click="previewImg"/>
      <div class="btn-section">
        <div class="btn-item">
          <button open-type="share">
            <i :style="wx"></i>
            <p>微信好友</p>
          </button>
        </div>
        <div class="btn-item" @click="onSaveImageClick">
          <i :style="save"></i>
          <p>保存图片</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MButton from 'comp/m-button'
import { downloadFile, saveImageToPhotosAlbum } from '@/utils/wx'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    MButton
  },
  data () {
    return {
      imgUrl: '',
      icons: {
        wx: `${require('static/images/poster/wx.png')}`,
        save: `${require('static/images/poster/save.png')}`,
      },
      playerId: ''
    }
  },
  async mounted () {
    this.resetData()
    await this.getPlayerId()
    this.onDownloadFile()
  },
  computed: {
    wx () {
      return `background-image: url(${this.icons.wx});`
    },
    save () {
      return `background-image: url(${this.icons.save});`
    }
  },
  methods: {
    /**
     * 下载图片到本地
     */
    async onDownloadFile () {
      const posterUrl = this.$root.$mp.query.posterUrl
      const ret = await downloadFile({
        url: decodeURIComponent(posterUrl),
        toastText: '海报生成中...'
      })
      if (ret.statusCode === 200) {
        this.imgUrl = ret.tempFilePath
      }
    },
    /**
     * 保存图片到相册
     */
    async onSaveImageClick () {
      try {
        await saveImageToPhotosAlbum({
          filePath: this.imgUrl
        })
      } catch (e) {
        if (e.errMsg === 'saveImageToPhotosAlbum:fail auth deny' ||
          e.errMsg === 'saveImageToPhotosAlbum:fail:auth denied') {
          wx.openSetting({
            success (settingdata) {
              if (settingdata.authSetting['scope.writePhotosAlbum']) {
                // 获取权限成功，再次点击图片保存到相册
                this.onSaveImageClick()
              } else {
                // 获取权限失败
                wx.showModal({
                  title: '提示',
                  content: '保存失败，请重试',
                  showCancel: false
                })
              }
            }
          })
        }
      }
    },
    /**
     * 预览图片
     */
    previewImg () {
      const imgArr = [this.imgUrl]
      wx.previewImage({
        current: imgArr[0], // 当前图片地址
        urls: imgArr // 所有要预览的图片的地址集合，数组形式
      })
    },
    /**
     * 获取playerId
     */
    async getPlayerId () {
      const ret = await this.$store.dispatch('getPlayerInfo')
      this.playerId = ret.account.player_id
    },
  },
  onShareAppMessage () {
    return {
      title: '免费送你一瓶阿道夫洗发水，赶快来领取吧！',
      path: `/pages/index/main?playerId=${this.playerId}&parentId=${this.playerId}`
    }
  }
}
</script>

<style lang="less" scoped>
.adaofu-poster {
  .container {
    padding: 30rpx 30rpx 183rpx;
  }
  img {
    width: 100%;
  }
  .btn-section {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    background-color: #fff;
    padding: 20rpx 0;
    border-top: 1rpx solid #eee;
    .btn-item {
      width: 50%;
      text-align: center;
      i {
        display: block;
        width: 100rpx;
        height: 100rpx;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        margin: 0 auto;
      }
      p {
        padding-top: 15rpx;
        color: #000;
        font-size: 28rpx;
        line-height: 28rpx;
      }
      button {
        padding: 0;
        line-height: 1.0;
        background-color: transparent;
        &::after {
          display: none;
        }
      }
    }
  }
}
</style>
